<template>
  <div>
    <div class="box">
      这是 app.vue组件 被引入了main.js main.js又被引入 index.html
    </div>
    <h1>{{ msg }}</h1>
    <!-- 展示数据 用插值语句 -->
    <h2>{{ num }}</h2>
    <button @click="add">num加一</button>

    <!-- v-for循环 -->
    <ul>
      <li v-for="item in 10" :key="item">{{ item }}</li>
    </ul>

    <ul>
      <li v-for="(item, index) in list" :key="index">
        姓名是：{{ item.name }} 年龄是：{{ item.age }}
      </li>
    </ul>

    <!-- v-bind 动态绑定属性 -->
    <!-- 一般用来动态绑定类名和图片的src -->
    <div v-bind:class="className"></div>
    <div :class="className"></div>
    <!-- 类名直接是这个变量 -->
    <div :class="{ wrap: num > 10 }">11111</div>
    <!-- 有没有wrap这个类名 取决于 ：后面的条件的true或者false -->
    <div :class="{ wrap: true }"></div>
  </div>
  <!-- template里面只能有一个根标签 所以一般会套一个div -->
</template>
<script>
export default {
  // data: function () {
  //   return {};
  // },
  data() {
    return {
      msg: "这是一个vue2的项目 vue2很简单",
      num: 1,
      list: [
        { name: "小明", age: 18 },
        { name: "李白", age: 200 },
        { name: "巴少", age: 20 },
        { name: "周瑜", age: 40 },
        { name: "小乔", age: 30 },
        { name: "凯", age: 80 },
      ],
      className: "box",
    };
  },
  //data 变成了一个函数

  methods: {
    add() {
      this.num++;
    },
  },
};
// js代码都应该写在导出的 {}里面

// export default 是导出的意思 把这个组件导出 才能在main.js中引入
// 每一个组件都由三部分组成 结构样式行为
</script>
<style lang="scss">
.box {
  width: 200px;
  height: 200px;
  color: aquamarine;
  background: red;
}
.wrap {
  width: 200px;
  height: 200px;
  background: greenyellow;
}

// lang="scss" 加上这个才能用scss
</style>
